<template>
  <div class="wrapper">
	<swiper :options="swiperOption" v-if="showSwiper">
	    <swiper-slide v-for="item of list" :key="item.id">
	    	<img class="swiper-img" :src="item.imgUrl">
	    </swiper-slide>
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
   </swiper>
 </div>    
</template>
 
<script>
export default{

	name:'HomeSwiper',
	 data () {
	 	return{
	 		swiperOption:{
	 			pagination:'.swiper-pagination',
	 			loop:true
	 		},
	 	}
	 },
	 props:{
	 	list:Array
	 },
	 computed:{
	 	showSwiper(){
	 		return this.list.length
	 	}
	 }
}	
</script>

<style lang="stylus" scoped>
 
 .wrapper >>> .swiper-pagination-bullet-active
 	background: #ffffff !important

 .wrapper
 	overflow:hidden
 	width:100%
 	// height: 2rem
 	// padding-bottom: 31.25%
 	
  .swiper-img
 	 width:100%
 	 background-size: cover
 	 

</style>